<template>
  <div>
    <div class="u-main">
      <div id="tab_menu">
        <ul class="u-tab clearfix">
          <li :class="{current:(model==1)}"><a href="javascript:void(0)" @click="changeModel(1)">登陆密码</a></li>
          <li :class="{current:(model==2)}"><a href="javascript:void(0)" @click="changeModel(2)">支付密码</a></li>
        </ul>
      </div>
      <div id="tab_box">
        <div class="u-form-wrap" v-show="model==1">
          <div>
            <!--这是登陆密码设置-->
            <!--style="display: none;"-->
            <ul class="u-tab clearfix" >
              <li class="current"><a>请设置xxx的登录密码</a></li>
            </ul>
            <br /><br />
            <el-form ref="form"  label-width="120px" size="30px">
              <el-form-item label="原密码">
                <i class="el-icon-picture-outline-round"></i>
                <el-input style="width:200px;" v-model="oldpass"></el-input>
              </el-form-item>
              <el-form-item label="新密码">
                <i class="el-icon-picture-outline-round"></i>
                <el-input style="width:200px;" v-model="newpass"></el-input>
              </el-form-item>
              <el-form-item label="确认新密码">
                <i class="el-icon-picture-outline-round"></i>
                <el-input style="width:200px;" v-model="renewpass" @blur="rePassword"></el-input>
                <p style="color: red;font-size: 16px">{{renewpassmsg}}</p>
                <br/><br/>
                <el-button type="primary" icon="el-icon-loading" @click="changePass">确定修改</el-button>
              </el-form-item>
            </el-form>
          </div>
        </div>
        <div class="u-form-wrap" v-show="model==2">
          <div>
            <!--这是支付密码设置-->
            <ul class="u-tab clearfix" >
              <li class="current"><a>请设置xxx的支付密码</a></li>
            </ul>
            <br /><br />
            <el-form ref="form"  label-width="120px" size="30px">
              <el-form-item label="原密码">
                <i class="el-icon-picture-outline-round"></i>
                <el-input style="width:200px;" v-model="oldpaypass"></el-input>
              </el-form-item>
              <el-form-item label="手机号">
                <i class="el-icon-picture-outline-round"></i>
                <el-input style="width:200px;" v-model="mymobile"></el-input>
                <el-button type="primary" icon="el-icon-loading" @click="sendPhone">发送</el-button>
              </el-form-item>
              <el-form-item label="验证码">
                <i class="el-icon-picture-outline-round"></i>
                <el-input style="width:200px;" v-model="phonecode"></el-input>
                <el-button type="primary" icon="el-icon-loading" @click="recode">确定</el-button>
              </el-form-item>
            </el-form>
          </div>
          <div class="u-form-wrap" v-show="payresult" >
            <div>
              <!--这是支付密码修改结果设置-->
              <ul class="u-tab clearfix">
                <li class="current"><a>请设置新密码</a></li>
              </ul>
              <br /><br />
              <el-form ref="form"  label-width="120px" size="30px" >
                <el-form-item label="新密码">
                  <i class="el-icon-picture-outline-round"></i>
                  <el-input style="width:200px;" v-model="newpaypass"></el-input>
                </el-form-item>
                <el-form-item label="再次确认密码">
                  <i class="el-icon-picture-outline-round"></i>
                  <el-input style="width:200px;" v-model="renewpaypass" ></el-input>
                  <br/><br/>
                  <el-button type="primary" icon="el-icon-loading" @click="updatepaypass">确定修改</el-button>
                </el-form-item>
              </el-form>
            </div>
          </div>
        </div>


      </div>
    </div>
  </div>
</template>


<script>
    export default {
      name: "",
      data(){
        return{
          model:1,payresult:false,oldpass:"",newpass:"",renewpass:"",renewpassmsg:"",
          oldpaypass:"",mymobile:"",phonecode:"",sendphonecode:"",newpaypass:"",renewpaypass:"",
        }
      },
      methods:{
        changeModel(i){
          this.model=i
        },
        //确认两次密码是否一致
        rePassword:function(){
          if (this.newpass!=this.renewpass) {
            this.renewpassmsg="两次密码不一致"
          }else {
            this.renewpassmsg=""
          }
        },
        //修改密码
        changePass:function () {
         this.axios.post("/api/userHomePageController/changPass",{
           oldpass:this.oldpass,
           renewpass:this.renewpass
         }).then(data=>{
            if (data.data==0) {
              alert("原密码不正确！！！")
            }
            if(data.data==1){
              alert("密码修改成功！！！")
            }
         })

        },
        //发送手机验证码
        sendPhone:function () {
          this.axios.get("/api/sms/sendSmsMsg/"+this.mymobile,{}).then(data=>{
            if(data.data!=null){
              alert("验证码发送成功！！！")
            }
            this.sendphonecode=data.data
          })
        },
        //确认验证码是否正确
        recode:function () {
          if(this.sendphonecode==this.phonecode){
            this.payresult=true
          }else{
            alert("验证码不正确！！！")
          }
        },
        //修改支付密码
        updatepaypass:function () {
          this.axios.post("/api/userHomePageController/changePaypass",{
            oldpaypass:this.oldpaypass,
            renewpaypass:this.renewpaypass
          }).then(data=>{
            if(data.data==0){
              alert("原支付密码不正确")
            }
            if(data.data==1){
              alert("支付密码修改成功")
            }
          })
        }
      }
    }
</script>

<style scoped>
  @import  '../../assets/usercss/css/UserCSS.css';

</style>
